import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Run, Weight, Sleep, Heart } from '../../components/Cards'
// 导入样式
import './index.css'


function Index() {
    const navigate = useNavigate()
    const [cards, setCards] = useState([])

    const componentMap = {
        Run: <Run />,
        Weight: <Weight />,
        Sleep: <Sleep />,
        Heart: <Heart />,
    };

    useEffect(() => {
        // localStorage.setItem('cards', JSON.stringify([
        //     { id: 1, title: '走步', isable: true, component: 'Run',url: '/options/walk' },
        //     { id: 2, title: '体重', isable: true, component: 'Weight',url: '/options/weight' },
        //     { id: 3, title: '睡眠', isable: true, component: 'Sleep',url: '/options/sleep' },
        //     { id: 4, title: '心率', isable: true, component: 'Heart',url: '/options/heart' },
        //     { id: 5, title: '血氧饱和度', isable: true, component: '',url: '/' },
        //     { id: 6, title: '体温', isable: true, component: '',url: '/' },
        //     { id: 7, title: '血压', isable: true, component: '',url: '/' },
        //     { id: 8, title: '血糖', isable: true, component: '',url: '/' },
        //     { id: 9, title: '运动', isable: true, component: '',url: '/' },
        // ]))

        const data = JSON.parse(localStorage.getItem('cards')) || []
        setCards(data)
    }, [])



    return (
        <div>
            <div id='head'>
                <h4>一起来运动吧</h4>
                <p>用运动轨迹记录您的生活</p>
                <button onClick={()=>{navigate('/options/run')}} >开始运动</button>
            </div>

            <div id="opc">
                <p>健康数据</p>
                <span onClick={() => { navigate('/options/cards') }}>编辑卡片</span>
            </div>

            <div id="box">
                {
                    cards.map(item =>
                        item.isable &&
                        <div className="card"
                            onClick={()=>{navigate(item.url);}}
                            key={item.id}>
                            {componentMap[item.component]}
                        </div>
                    )}

            </div>

        </div>
    );
}
export default Index;